<template>
  <div class="container">

    <div>
      <van-nav-bar title="商圈云新版商城上线通知"
                   left-text=""
                   @click-left="onClickLeft"
      />
    </div>
    <div>

      <van-form @submit="onSubmit">
        <div style="text-align: left; font-size: 15px; color: #333; padding-left: 20px; padding-right:20px;padding-top:20px; line-height: 2;">
          各位经销商老板的专属线上私域运营神器：商圈云e订单 旗舰版正式上线啦！
        </div>
        <div style="text-align: left; font-size: 15px; color: #333; padding-left: 20px;padding-right:20px;padding-top:10px;padding-bottom:20px;line-height: 2;">
          有了它，您的客户可直接通过微信小程序下单、大大降低您的人力成本，提高销售效率。电子订单实时推送，杜绝拆单、拼单、价格舞弊等现象。新品及促销活动实时下发，提高复购和销售效率。丰富的营销玩法，秒杀、满赠、满减、红包、优惠券、积分等，最大限度的帮您提高销量！
        </div>
        <div>
          <img src="../images/1copy.png" width="95%" style="margin-left: 2.5%">
        </div>

        <div style="padding-left: 10px;font-size: 16px;font-weight: bold;padding-top: 20px;">
          商圈云e订单，轻松帮您解决以下8大困扰：
        </div>
        <div>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">1、促销政策执行慢</p>
          <p style="font-size: 14px;padding-left: 10px;line-height: 2;padding-right: 10px;">传统方式难以及时将最新促销信息传达到每个销售终端，导致政策执行不到位</p>
          <p style="font-size: 15px;font-weight: bold;padding-right: 10px;padding-left: 10px;">2、拆单拼单频发</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">人工操作容易出现拆单拼单现象，影响销售数据准确性和公平性</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">3、新品推广费时费力</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">缺乏高效的新品信息传播渠道，推广周期长，效果难以保证</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">4、人力成本高</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">需要大量人力进行订单处理、客户服务等工作,人力成本居高不下</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">5、客户流失</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">客情在业务手中，缺乏有效的客户管理和维护手段，难以建立长期稳定的客户关系</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">6、运营成本高</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">传统运营模式下，人工、库存等各项成本居高不下</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">7、终端对账太麻烦</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">交易小票保存时间短，时间一长记不清、说不明。对账耗时耗力，容易出错，还影响资金周转和财务管理效率</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">8、资金周转慢、坏账风险高</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">传统模式下账期长，资金占用大，同时面临较高的坏账风险。缺乏高效的在线支付系统,无法实现资金的快速回笼和安全管理</p>
        </div>

        <div>
          <img src="../images/2copy.png" width="95%" style="margin-left: 2.5%">
        </div>
        <div style="padding-left: 10px;font-size: 16px;font-weight: bold;padding-top: 20px;">
          商圈云e订单，6大优势，帮您轻松实现销量暴涨：
        </div>
        <div>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">1、全渠道商城</p>
          <p style="font-size: 14px;padding-left: 10px;line-height: 2;padding-right: 10px;">扩展线上销售渠道，扩大铺货范围，线上线下业务融合打通</p>
          <p style="font-size: 15px;font-weight: bold;padding-right: 10px;padding-left: 10px;">2、高效引流拓客</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">促销活动商品分享，低成本快速拉新，实现社交裂变</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">3、客户精细化管理</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">客户价格体系，促销活动千人千面精准营销，提高复购和转化率</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">4、丰富的营销玩法</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">秒杀、满赠、满减、现金红包、优惠券、积分商城，多样玩法，花式卖货促进成交</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">5、智能化数据分析</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">实时监测运营状况，时刻了解商城动态，为经营决策提供依据</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">6、帮助您完成商城搭建，快速开始私域运营</p>
          <p style="font-size: 15px;padding-left: 10px;line-height: 2;padding-right: 10px;">全程由资深客户经理手把手帮助您完成基础信息、店铺设置、商城装修等服务，商城上线更省心</p>
         </div>
        <div>
          <img src="../images/3copy.png" width="95%" style="margin-left: 2.5%">
        </div>
        <div>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">那么这么好的工具该如何开通呢？方式多多：</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">1.联系各自对口业务经理</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;">2.联系专业实施经理：</p>
          <p style="font-size: 15px;padding-left: 10px;padding-right: 10px;">卢经理：13791809823</p>
          <p style="font-size: 15px;padding-left: 10px;padding-right: 10px;">郭经理：17659320892</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;padding-top:20px;">预祝各位老板，生意兴隆，财源滚滚！</p>
          <p style="font-size: 15px;font-weight: bold;padding-left: 10px;padding-right: 10px;padding-top:20px;">商圈云，永远给您更多！</p>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { saveDkinfo, saveReportReadNum, uploadShareImg } from 'api/api';
import { Toast } from 'vant';
export default {
  name: 'myquanzi',
  data() {
    return {
      xq1:'',
      xq2:'',
      xq3:'',
      xq4:'',
      xq5:'',
      xq6:'',
      xq7:'',
      xq8:'',
      xq9:'',
      xq10:'',
      agencyid:'',
      gsname:'',
      frname:'',
      frsfzh:'',
      dkje:'',
      ppname:'',
      phone:'',
      fileList:[],
      images:[],

    }
  },
  created() {



  },
  methods: {
    //识别操作系统
    viewczxt(){
      var u = navigator.userAgent, app = navigator.appVersion;
      var isXiaomi = u.indexOf('XiaoMi') > -1; // 小米手机
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // 其它安卓
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios
      if (isAndroid) {
        return "Android"
      }else if (isIOS) {
        if(isXiaomi) {
          return  "Android"
        }else {
          return  "Ios"
        }
      }
    },

    onClickLeft() {
      this.$router.go(-1) // 返回上一层
    },

    onSubmit(){
      let param = {}
      param.agencyid = this.agencyid
      param.phone = this.phone
      param.frname = this.frname
      param.frsfzh = this.frsfzh
      param.gsname = this.gsname
      param.dkje = this.dkje
      param.ppname = this.ppname
      param.yyzzurl = this.images.toString()



      if(!param.frname){
        Toast.fail('请输入法人姓名')
        return
      }

      if(!param.frsfzh){
        Toast.fail('请输入法人身份证号')
        return
      }

      if(!param.gsname){
        Toast.fail('请输入公司名称')
        return
      }

      if(!param.dkje){
        Toast.fail('请输入贷款金额')
        return
      }

      if(!param.ppname){
        Toast.fail('请输入代理品牌')
        return
      }

      if(!param.phone){
        Toast.fail('请输入您的手机号，以便跟您联系')
        return
      }


      saveDkinfo(param).then(response => {
        if (response.code === 200) {
          //Toast.success('保存成功')
          this.$router.push({ path: '/success', query: {}})
        }else{
          Toast.fail(response.msg)
        }
      })

    },

    saveReportReadNum(){
      let param = {}
      param.dictType = 'report_readed'
      saveReportReadNum(param).then(response => {
        if (response.code === 200) {

        }else{
          // Toast.fail(response.msg)
        }
      })
    },


    /**
     * 删除附件
     * @param {*} e
     */
    delImgs:function(item){
      console.log(item)
      console.log(this.images)
      let that = this
      let images = that.images
      let length = images.length
      for(var i=0;i<length;i++){
        if(images[i] == item.item){
          that.images.splice(i,1)
        }
      }
    },

    selectTp(){
      window.postMessage('camera');
      document.getElementById("uploadfileid").click();
    },

    fileSelected() {
      var file = document.getElementById('uploadfileid').files[0];
      if (file) {
        var fileSize = 0;
        if (file.size > 1024 * 1024)
          fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
        else
          fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

        console.log(file.name)
        console.log(fileSize)
        console.log(file.type)

        let formData = new FormData();
        formData.append("file", file);
        formData.append("type","quanzi")
        let fileList = []
        uploadShareImg(formData).then(response => {
          console.log(response)
          if(response.code == 200 ){
            fileList.push(response.data.url)
            this.images.push(response.data.url+'')
            this.fileList.concat(fileList)
            console.log(this.fileList)
            console.log(this.images)
          }
        });
      }
    }


  }

}
</script>

<style scoped>

.container{
  background-color: white;
  height: auto;
}

.columnr{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.rownr{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  font-size: 16px;
}

.content{
  font-size: 16px;
  padding:10px;
  width: 80%;
}

.text{
  text-indent: 32px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
  padding-top: 10px;
  line-height: 200%;
}

.text1{
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  padding-top: 15px;
  line-height: 200%;
}

.box {
  position: relative;
  display: inline-block;
  padding-left: 12px;
}
.box .clear {
  position: absolute;
  top: 0;
  right: 0;
}


</style>
